@import "common-var";

.layout-message-notification {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  color: var(--font-color);
  font-size: 14px;
  font-variant: tabular-nums;
  line-height: 1.5715;
  list-style: none;
  font-feature-settings: "tnum", "tnum";
  display: flex;
  overflow: hidden;

  .msg-notify-menu {
    margin-top: 16px;
    padding-right: 16px;
    height: 610px;
    position: relative;
    display: flex;
    flex: none;
    align-items: center;
    flex-direction: column;
    min-width: 50px;

    .fixed-anchor-point {
      font-size: 14px;
      font-weight: 700;
      margin-bottom: 10px;
      height: 38px;
      width: 100%;
      display: flex;
      justify-content: center;
      cursor: pointer;

      .item {
        justify-content: center;
        margin: 0 20px;
      }

      .iconfont {
        margin-right: 5px;
      }
    }

    .menu-item {
      height: 38px;
      width: 100%;
      display: flex;
      justify-content: center;
      margin-bottom: 5px;
      cursor: pointer;

      .item {
        width: 100%;
        height: 32px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 12px;

        :first-child {
          margin-right: 10px;
        }

        .count {
          color: #8A8F8D;
          font-weight: 600;
          font-size: 12px;
        }
      }

      .item:hover, .active-menu {
        background: var(--on-theme-bg-color);
        border-radius: 6px;
      }
    }

    .msg-setting .item {
      .iconfont {
        margin-right: 8px;
      }

      justify-content: left;
    }

    .item-line {
      justify-content: left;
      height: 20px;
      margin-top: 25px;

      .line {
        height: 1px;
        width: 100%;
        background: #b1b6b4;
      }
    }
  }

  .msg-notify-body {
    margin-left: -1px;
    border-left: 1px solid @border-color_normal;
    flex: auto;
    min-width: 0;
    min-height: 0;
    box-sizing: border-box;

    .module-tabs-wrapper {
      display: flex;
      width: 100%;

      .module-tabs-tabpane-active {
        flex: none;
        width: 100%;
        outline: none;
        min-height: 400px;
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        color: var(--font-color);
        font-size: 14px;
        font-variant: tabular-nums;
        line-height: 1.5715;
        list-style: none;
        font-feature-settings: "tnum", "tnum";
        position: relative;
        //background: #ffffff;
        border-radius: 6px;

        .tabs-tabpane-head {
          min-height: 52px;
          color: var(--font-color);
          font-weight: 500;
          background: transparent;
          border-radius: 6px 6px 0 0;
          display: flex;
          justify-content: space-between;
          align-items: center;
          border-bottom: 1px solid @border-color_normal;
          font-size: 14px;

          .active-tab {
            margin-left: 15px;

            .chat-msg-retry {
              font-size: 11px;

              .update-ing {
                font-size: 12px;
                color: @grey-white-font-color;
                animation: spin 1s linear infinite;
                display: inline-block;

                &:before {
                  animation: spin 25s linear infinite;
                  animation-delay: 0.8s;
                }
              }
            }
          }

          .all-read-action {
            float: right;
            margin-right: 46px;
            color: var(--title-color);
            font-weight: 400;
            cursor: pointer;
          }

          .all-read-action:hover {
            color: @grey-white-font-color;
          }
        }

        .tabs-notify-holder {
          box-sizing: border-box;
          color: #262626;
          font-size: 14px;
          font-variant: tabular-nums;
          line-height: 1.5715;
          list-style: none;
          font-feature-settings: "tnum", "tnum";
          position: relative;
          background: transparent;
          max-height: 570px;
          height: 570px;
          border-radius: 0;
          overflow-y: auto;

          .tab-list-items {
            margin: 0;
            padding: 0;
            list-style: none;
            outline: none;

            .tab-list-item {
              display: block;

              .notification-item {
                display: flex;
                transition: background-color .3s ease;
                word-break: break-word;
                position: relative;
                padding: 15px 16px;

                .avatar {
                  margin-top: 2px;
                }

                .item-content {
                  color: var(--title-color);
                  margin-left: 12px;
                  font-size: 14px;
                  word-wrap: break-word;
                  overflow: hidden;
                  width: 100%;

                  .action-info {
                    width: 100%;
                    margin-bottom: 5px;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    gap: 8px; /* 可选间距 */

                    .action {
                      flex: 1; /* 占据剩余空间 */
                      min-width: 0; /* 关键：允许内容区域收缩 */
                      overflow: hidden;
                      text-overflow: ellipsis;
                      white-space: nowrap;
                      display: flex;

                      .user-card {
                        margin-right: 5px;
                        flex-shrink: 0; /* 禁止收缩 */
                      }

                      span {
                        flex-shrink: 0; /* 禁止收缩 */
                      }

                      .context-subject {
                        margin-left: 5px;
                        flex: 1; /* 占据剩余空间 */
                        min-width: 0; /* 重要：覆盖默认最小宽度 */

                        /* 文字溢出处理 */
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                      }
                    }

                    .action-content {
                      flex: 1; /* 占据剩余空间 */
                      min-width: 0; /* 关键：允许内容区域收缩 */
                      overflow: hidden;
                      text-overflow: ellipsis;
                      white-space: nowrap;

                      .content-warp {
                        color: var(--title-color);
                        max-width: 98.5%;
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        display: flex;

                        .user-card {
                          margin-right: 5px;
                          flex-shrink: 0; /* 禁止收缩 */
                        }

                        span {
                          flex-shrink: 0; /* 禁止收缩 */
                        }

                        .context-subject {
                          margin-left: 5px;
                          flex: 1; /* 占据剩余空间 */
                          min-width: 0; /* 重要：覆盖默认最小宽度 */

                          /* 文字溢出处理 */
                          white-space: nowrap;
                          overflow: hidden;
                          text-overflow: ellipsis;
                        }
                      }

                      .ivu-badge {
                        flex-shrink: 0; /* 禁止收缩 */
                      }
                    }
                  }

                  .action-content {
                    font-size: 14px;
                    color: var(--font-color);
                    display: flex;

                    .tip-content {
                      max-width: 98.5%;
                      display: block;
                      overflow: hidden; /* 隐藏超出内容 */
                      text-overflow: ellipsis; /* 添加省略号 */
                      white-space: nowrap;
                    }
                  }

                  .actor-info {
                    display: flex;

                    .user-card {
                      margin-right: 5px;
                    }
                  }

                  .context-actor {
                    font-weight: 600;
                    color: var(--font-color);
                  }

                  .context-subject {
                    font-weight: 400;
                    color: var(--font-color);
                    width: 100%;

                    span {
                      max-width: 80%;
                      overflow: hidden; /* 隐藏超出内容 */
                      text-overflow: ellipsis; /* 添加省略号 */
                      white-space: nowrap;
                    }
                  }

                  .sys-msg-label {
                    color: #1389bf;
                  }

                  .context-actor:hover, .context-subject:hover {
                    color: var(--title-color);
                  }

                  .ivu-badge > .ivu-badge-dot {
                    height: 6px;
                    width: 6px;
                  }

                  .msg-system {
                    flex-shrink: 0; /* 禁止收缩 */
                    /* 可选：防止内容换行 */
                    white-space: nowrap;
                    font-size: 12px;
                    color: @grey-white-font-color;
                  }
                }
              }

              .notification-item:hover {
                background-color: var(--rj-editor-bg-color);
              }
            }
          }
        }

        .tabs-message-holder {
          position: relative;
          -webkit-box-flex: 1;
          -ms-flex: 1;
          flex: 1;
          max-height: 570px;
          height: 570px;
          overflow: hidden !important;

          .lovbe-im {
            -webkit-box-shadow: 0 2px 4px 0 rgba(121, 146, 185, 0.54);
            box-shadow: 0 2px 4px 0 rgba(121, 146, 185, 0.54);
            border-radius: 4px;
            height: 100%;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            position: relative;

            .session-list {
              width: 180px;
              border-right: 1px solid var(--border-color);
              position: relative;

              .list-container {
                position: relative;

                .list-item {
                  width: 100%;
                  display: -webkit-box;
                  display: -ms-flexbox;
                  display: flex;
                  -webkit-box-orient: horizontal;
                  -webkit-box-direction: normal;
                  -ms-flex-direction: row;
                  flex-direction: row;
                  padding: 17px 20px;
                  position: relative;
                  overflow: hidden;
                  cursor: pointer;

                  .avatar {
                    margin-right: 12px;
                    margin-top: 2px;
                  }

                  .name-box {
                    display: -webkit-box;
                    display: -ms-flexbox;
                    display: flex;
                    -webkit-box-orient: vertical;
                    -webkit-box-direction: normal;
                    -ms-flex-direction: column;
                    flex-direction: column;
                    -webkit-box-pack: center;
                    -ms-flex-pack: center;
                    justify-content: center;

                    .name {
                      width: 110px;
                      display: -webkit-box;
                      display: -ms-flexbox;
                      display: flex;
                      -webkit-box-align: center;
                      -ms-flex-align: center;
                      align-items: center;
                      font-size: 14px;
                      min-height: 16px;
                      line-height: 1;

                      .name-value {
                        -webkit-box-flex: 1;
                        -ms-flex: 1;
                        flex: 1;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                      }
                    }

                    .last-word {
                      font-size: 12px;
                      color: #999;
                      padding: 4px 0;
                      margin-bottom: -6px;
                      overflow: hidden;
                      width: 110px;
                      white-space: nowrap;
                      text-overflow: ellipsis;
                    }
                  }

                  .un-read-count {
                    position: absolute;
                    left: 2.6rem;
                    top: 10px;

                    .ivu-badge-count {
                      height: 15px;
                      width: 15px;
                      min-width: 15px;
                      line-height: 15px;
                      padding: 0;
                      font-size: 11px;
                    }
                  }

                  .close {
                    position: absolute;
                    top: 0;
                    bottom: 0;
                    left: -2px;
                    display: -webkit-box;
                    display: -ms-flexbox;
                    display: flex;
                    -webkit-box-pack: center;
                    -ms-flex-pack: center;
                    justify-content: center;
                    -webkit-box-align: center;
                    -ms-flex-align: center;
                    align-items: center;
                    width: 24px;
                    -webkit-transform: translateX(-100%);
                    transform: translateX(-100%);
                    opacity: 0;
                    -webkit-transition: 300ms;
                    transition: 300ms;
                    font-size: 12px;
                    color: @grey-white-font-color;
                  }

                  &:hover {
                    background-color: var(--dropdown-item-hover);

                    .close {
                      -webkit-transform: translateX(0);
                      transform: translateX(0);
                      opacity: 1;
                    }
                  }
                }

                .active {
                  background-color: var(--dropdown-item-hover);
                }
              }
            }

            .session-box {
              -webkit-box-flex: 1;
              -ms-flex: 1;
              flex: 1;

              .dialog {
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                -webkit-box-orient: vertical;
                -webkit-box-direction: normal;
                -ms-flex-direction: column;
                flex-direction: column;
                -webkit-box-align: stretch;
                -ms-flex-align: stretch;
                align-items: stretch;
                height: 100%;
                background-color: var(--rj-editor-bg-color);

                .title {
                  height: 36px;
                  -ms-flex-negative: 0;
                  flex-shrink: 0;
                  display: -webkit-box;
                  display: -ms-flexbox;
                  display: flex;
                  -webkit-box-pack: center;
                  -ms-flex-pack: center;
                  justify-content: center;
                  -webkit-box-align: center;
                  -ms-flex-align: center;
                  align-items: center;
                  border-bottom: 1px solid @border-color_normal;
                  position: relative;
                  text-align: center;
                  color: var(--font-color);

                  .is-black {
                    position: absolute;
                    top: 36px;
                    left: 0;
                    z-index: 2;
                    width: 100%;
                    height: 32px;
                    line-height: 32px;
                    color: #fb7299;
                    text-align: left;
                    padding: 0 17px;
                    background-color: var(--rj-editor-bg-color);
                    backdrop-filter: blur(5px);
                  }

                  .action-menu {
                    position: absolute;
                    right: 10px;
                    z-index: 2;

                    .menu-btn {
                      color: @grey-white-font-color;
                    }
                  }
                }

                .message-list {
                  -webkit-box-flex: 1;
                  -ms-flex: 1;
                  flex: 1;
                  position: relative;
                  overflow-x: hidden;

                  .message-list-content {
                    max-width: 555px;
                    font-size: 14px;

                    .msg-more {
                      padding: 16px 0 0;
                      text-align: center;
                      color: #23ade5;
                      font-size: 12px;

                      .error {
                        color: @grey-white-font-color;

                        .reload {
                          color: @primary-color;
                          cursor: pointer;
                        }
                      }
                    }

                    .msg-system {
                      color: var(--title-color);
                      padding-bottom: 16px;
                      text-align: center;
                      font-size: 13px;
                    }

                    .msg-item {
                      min-height: 48px;
                      padding: 0 16px 16px;
                      overflow: hidden;
                      position: relative;

                      .avatar {
                        float: left;
                      }

                      .message {
                        float: left;
                        max-width: 440px;
                        margin: 0 10px;
                        position: relative;
                        overflow: hidden;
                        display: flex;
                        flex-direction: row-reverse;

                        .message-action {
                          color: var(--title-color);
                          font-size: 13.5px;
                          margin-left: 8px;
                          margin-bottom: 1px;
                          align-self: flex-end;
                          visibility: hidden;
                          display: flex;
                          flex-direction: row-reverse;

                          .iconfont {
                            font-size: 14px;
                            margin-right: 4px;
                            cursor: pointer;
                          }
                        }

                        .message-content {
                          margin: auto;
                          line-height: 1.5;
                          min-height: 37px;
                          padding: 8px 16px;
                          word-wrap: break-word;
                          word-break: break-word;
                          border-radius: 0 16px 16px 16px;
                          overflow: hidden;
                          background: var(--dropdown-bg-color);
                        }

                        .message-content:not(.is-img) {
                          position: relative;
                          z-index: 1;
                        }

                        .is-img {
                          padding: 0;
                          cursor: zoom-in;
                        }

                        &:hover {
                          .message-action {
                            visibility: visible;
                          }
                        }
                      }
                    }

                    .is-me {
                      .avatar {
                        float: right;
                      }

                      .message {
                        position: relative;
                        float: right;
                        display: flex;
                        align-items: center;
                        flex-direction: row;

                        .message-send-loading {
                          margin-right: 3px;
                          .update-ing {
                            color: @grey-white-font-color;
                            animation: spin 1s linear infinite;
                            display: inline-block;
                          }
                        }

                        .message-send-status {
                          margin-right: 5px;

                          .iconfont {
                            font-size: 17px;
                            color: @grey-white-font-color;
                          }
                        }

                        .message-action {
                          margin-right: 6px;
                          align-self: flex-end;
                          flex-direction: row;

                          .message-time {
                            margin-right: 5px;
                          }

                          .iconfont {
                            margin-right: 4px;
                          }
                        }

                        .message-content {
                          background: #80b9f2;
                          color: #fff;
                          border-radius: 16px 0 16px 16px;
                        }
                      }
                    }
                  }
                }

                .send-box {
                  height: 162px;
                  border-top: 1px solid @border-color_normal;
                  border-bottom-right-radius: 4px;
                  -ms-flex-negative: 0;
                  flex-shrink: 0;
                  padding: 0 16px;
                  position: relative;
                  z-index: 2;

                  .comment-box {
                    height: 100%;
                    position: relative;

                    .u-editor {
                      position: absolute;
                      width: 100%;
                      top: 40px;
                      z-index: 4;
                      border: unset;
                      background: unset;

                      .rich-input {
                        padding: 0 2px;
                      }
                    }

                    .active {
                      border: unset;
                      background-color: unset;
                    }

                    .action-box {
                      height: 100%;
                      width: 100%;
                      margin-top: 0;
                      font-size: 14px;
                      position: absolute;
                      top: 0;
                      left: 0;
                      z-index: 3;

                      .iconfont {
                        font-size: 16px;
                      }

                      .action-emoji, .action-picture {
                        position: absolute;
                        top: 10px;
                        left: 0;
                        z-index: 3;
                        display: flex;
                        align-items: center;

                        span {
                          line-height: 18px;
                        }
                      }

                      .action-picture {
                        margin-left: 65px;
                        display: flex;
                        align-items: center;
                      }

                      .btn-box {
                        position: absolute;
                        bottom: 10px;
                        right: 2px;
                        z-index: 3;

                        button {
                          margin-right: 0;
                        }
                      }
                    }
                  }
                }
              }

              .lovbe-im-placeholder {
                display: flex;
                align-items: center;
                align-content: center;
                justify-content: center;
                height: -webkit-fill-available;

                .empty-session {
                  font-size: 1.5rem;
                  color: @grey-white-font-color;
                }
              }
            }
          }
        }

        .tabs-setting-holder {
          position: relative;
          -webkit-box-flex: 1;
          -ms-flex: 1;
          flex: 1;
          max-height: 570px;
          height: 570px;
          overflow: hidden !important;

          .message-setting {
            padding: 10px 16px;
            margin: 0 12px;

            .setting-subtitle {
              margin: 0 0 10px;
              color: var(--font-color);
              line-height: 24px;
              font-weight: 500;
              font-size: 16px;
              text-align: inherit;
            }

            .setting-border {
              border-bottom: 1px solid #F4F5F5;
              margin-bottom: 15px;
              box-sizing: border-box;
            }

            .settings-item {
              position: relative;
              padding: 0 0 10px 0;
              margin-right: 10px;

              h4 {
                font-size: 14px;
                line-height: 22px;
                font-weight: 400;
                color: var(--font-color);
                margin-bottom: 0;
                margin-top: 0;
              }

              p {
                margin: 2px 0;
                font-size: 14px;
                line-height: 22px;
                color: #8A8F8D;
              }

              .settings-selector {
                position: absolute;
                right: 100px;
                top: 0;
              }

              .settings-radio {
                margin-top: 10px;
              }
            }
          }
        }
      }
    }
  }
}

/* disc动画 */
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
